<template>
  <div class="main-container">
    <div v-if="backShow" class="left-container-top" @click="back">
      <svg
        width="12"
        height="23"
        viewBox="0 0 17 28"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M12.816 27.1456C13.4813 27.2521 14.1971 27.2206 14.812 26.9349C16.0417 26.3616 16.4007 25.133 15.6005 24.2357L6.13011 13.6057L15.9192 3.26836C16.7463 2.39584 16.4247 1.15683 15.2131 0.546425C14.0014 -0.0620508 12.2964 0.158828 11.469 1.03327L0.667337 12.4389C0.062737 13.0757 0.0494345 13.951 0.634404 14.6059L11.0845 26.3345C11.4847 26.7841 12.151 27.0391 12.816 27.1456Z"
          fill="#FF5F04"
        />
      </svg>
    </div>
    <!-- 核心内容容器（禁止纵向滚动，强制横向布局） -->
    <div class="content-container">
      <div class="content-left">
        <el-card shadow="hover" class="left-box-card">
          <el-avatar class="el-jst-2">
            <img
              :src="backgroundImage"
              style="width: 100%; height: 100%; object-fit: cover;"
            />
          </el-avatar>
          <div class="title-text">{{ $t("home.superAdministrator") }}</div>
        </el-card>
      </div>

      <div class="content-right">
        <el-card shadow="hover" class="right-box-card-one">
          <el-form :model="form" label-position="left" label-width="80px">
            <el-form-item :label="$t('home.name')">
              <el-input
                v-model="form.userName"
                maxlength="50"
                show-word-limit
                clearable
                :placeholder="$t('home.namePlaceholder')"
              ></el-input>
            </el-form-item>
            <el-form-item :label="$t('login.email')">
              <el-input v-model="form.email" :disabled="true"></el-input>
            </el-form-item>
            <el-button
              :loading="submitLoading"
              @click="submitForm"
              style="background-color: #F26E04; color: white; width: 100%"
              >{{ $t("home.submit") }}</el-button
            >
          </el-form>
        </el-card>
      </div>
    </div>
    <!-- <div class="content-left">
      <el-card shadow="hover" class="left-box-card"> -->
    <!-- <div class="content-left-commStyle"> -->
    <!-- <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/"
            :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
            <i class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload> -->
    <!-- <img :src="backgroundImage" alt="" style="width: 100%;border-radius: 50%;" />
        </div> -->
    <!-- <el-avatar class="el-jst-2" style="width: 300px;height: 300px;">
          <img :src="backgroundImage" />
        </el-avatar>
        <div
          style="font-size: 25px;color: #000000;margin-top: 10%;margin-left: 10%;"
        >
          {{ $t("home.superAdministrator") }}
        </div>
      </el-card>
    </div> -->
    <!-- <div class="content-right">
      <el-card shadow="hover" class="right-box-card-one" :mode="form">
        <el-form style="width: 100%;" label-position="left" label-width="80px">
          <el-form-item :label="this.$t('home.name')">
            <el-input
              v-model="form.userName"
              maxlength="50"
              show-word-limit
              clearable
              :placeholder="$t('home.namePlaceholder')"
            ></el-input>
          </el-form-item>
          <el-form-item :label="this.$t('login.email')">
            <el-input v-model="form.email" :disabled="true"></el-input>
          </el-form-item>
          <el-button
            :loading="submitLoading"
            @click="submitForm"
            style="background-color: #F26E04; color: white; width: 100%"
            >{{ $t("home.submit") }}</el-button
          >
        </el-form>
      </el-card>
    </div> -->
  </div>
</template>
<script>
import {
  getUserById,
  editUserById,
  queryUserInfoRoleById
} from "../../api/userService";

import qs from "qs";

export default {
  components: {},
  data() {
    return {
      form: {},
      submitLoading: false,
      userId: "",
      backShow: false,
      backgroundImage: ""
    };
  },
  methods: {
    async submitForm() {
      if (!this.form.userName) {
        this.$message.error(this.$t("home.userNameRequired"));
        return;
      }
      await editUserById(this.userId, this.form.userName).then(res => {
        if (res.code == 200) {
          this.$message.success(this.$t("home.operationSuccess"));
          this.submitLoading = false;
          this.$router.go(-1);
        } else {
          this.$message.error(res.msg);
          this.submitLoading = false;
        }
      });
    },
    async queryUserById() {
      await getUserById(this.userId).then(res => {
        if (res.code === 200) {
          this.form = res.data;
        }
      });
    },
    back() {
      this.$router.go(-1);
    },
    async getUserInfoRoleById() {
      await queryUserInfoRoleById(this.userId).then(res => {
        if (res.code === 200) {
          if (res.data) {
            this.backgroundImage = res.data.avatar;
          } else {
            this.backgroundImage = require("../../assets/img/userInfoUpload.jpg");
          }
        } else {
          this.$message.error(res.msg);
        }
      });
    }
  },
  created() {
    if (this.$route.params.id) {
      this.userId = this.$route.params.id;
      this.backShow = true;
    } else {
      this.userId = qs.parse(localStorage.getItem("userInfo")).id;
      this.backShow = false;
    }
    this.queryUserById();
    this.getUserInfoRoleById();
  },
  mounted() {}
};
</script>

<style scoped>
/* @import "../../assets/css/PersonInformation.css";

.el-form {
  width: 35%;
  float: left;
  margin-top: 30px;
  margin-left: 30px;
}

.el-form-item {
  margin-bottom: 30px;
} */

.main-container {
  /* min-height: 100vh;
  background-color: #fffdf4;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow-y: hidden;  */
}

.left-container-top {
  /* 保持原样式，不做任何修改 */
  width: 60px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  /* 原样式中的定位和颜色等保持不变 */
}

.content-container {
  display: flex;
  flex-direction: row;
  padding: 0 20px;
  flex-shrink: 1; /* 禁止内容收缩 */
  /* 内容最小宽度等于视口宽度 */
  min-width: 100%;
  max-width: max-content;
  /* 最大宽度由内容决定 */
  height: calc(100vh - 60px); /* 扣除返回按钮高度，防止纵向溢出 */
  align-items: flex-start;
}

.content-left {
  width: 35%; /* 固定左侧35%宽度 */
  margin-top: 5%; /* 原设计顶部边距 */
  margin-left: 5%; /* 原设计左侧边距 */
}

.content-right {
  width: 48%; /* 固定右侧48%宽度 */
  margin-top: 5%;
  margin-left: 5%;
}

/* 卡片和表单样式与原设计完全一致 */
.left-box-card,
.right-box-card-one {
  height: 70vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.el-jst-2 {
  width: 250px !important;
  height: 250px !important;
  margin-left: 8%;
}
.el-avatar {
  width: 300px;
  height: 300px;
  border-radius: 50%;
}

.title-text {
  font-size: 25px;
  color: #000;
  margin-top: 10%;
  /* margin-left: 10%; */
  width: 300px;
  text-align: center;
}

.el-form {
  width: 100%;
  float: none;
  margin: 0;
}

.el-form-item {
  margin-bottom: 30px;
}

/* 隐藏横向滚动条（仅视觉隐藏，保留滚动功能） */
.content-container::-webkit-scrollbar {
  height: 0; /* 隐藏横向滚动条 */
}
</style>
